<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"

      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <body>

        <ui:composition template="./../../template/templateAdminUsuarios.xhtml">
            <ui:define name="title">Listar</ui:define>
            <ui:define name="descripcionHeader">
                <i class="fa fa-users"/> Usuarios
                <small>Listar usuarios</small>
            </ui:define>
            <ui:define name="breadcrumbHeader">

                <li class="active">Listar usuarios</li>

            </ui:define>
            <ui:define name="content">
                <h:form id="UsuarioListForm">   
                    <div class="row">

                        <div class="col-lg-12">

                            <div class="panel panel-default">
                                <div class="panel-heading" >
                                    <div class="row">
                                        <div class="col-lg-8">
                                            <div class="panel-title pull-left"><i class="fa fa-list"/> Lista de usuarios</div>

                                        </div>
                                        <div class="col-lg-4">
                                            <div class="panel-title pull-right">
                                                <div class="btn-group">   
                                                 <p:commandLink style=""  
                                                       id="viewButton"
                                                       styleClass="btn btn-primary btn-xs"
                                                       update=":UsuarioViewForm"
                                                       disabled="#{empty usuarioController.selected}"
                                                       oncomplete="PF('UsuarioViewDialog').show()">
                                                      <i class="fa fa-search"/>
                                                      </p:commandLink>
                                                
                                             
                                                <p:commandLink style=""  
                                                       id="editButton"
                                                       styleClass="btn btn-warning btn-xs"
                                                       update=":UsuarioEditForm"
                                                       disabled="#{empty usuarioController.selected}"
                                                       oncomplete="PF('UsuarioEditDialog').show()">
                                                      <i class="fa fa-pencil-square-o"/>
                                                      </p:commandLink>
                                                    
                                                    
                                                <p:commandLink style=""  
                                                       id="deleteButton"
                                                       styleClass="btn btn-danger btn-xs"
                                                       update=":UsuarioEditForm"
                                                       disabled="#{empty usuarioController.selected}"
                                                       oncomplete="PF('UsuarioEditDialog').show()">
                                                      <i class="fa fa-trash-o"/>
                                                      </p:commandLink>
                                                
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                                <p:dataTable id="datalist" value="#{usuarioController.items}" var="item"
                                             selectionMode="single" selection="#{usuarioController.selected}"
                                             emptyMessage="No se encontraron registros"
                                             paginator="true"
                                             widgetVar="tabla"
                                             rowKey="#{item.idUsuario}"
                                             rows="5"
                                             rowsPerPageTemplate="5,10,15,20,25"
                                             paginatorPosition="bottom"
                                             liveResize="true"
                                             resizableColumns="true"
                                             filterEvent="keyup"

                                             >
                                         <p:ajax event="rowSelect"   update=" :UsuarioListForm:viewButton :UsuarioListForm:editButton :UsuarioListForm:deleteButton"/>
                                       <p:ajax event="rowUnselect" update="   :UsuarioListForm:viewButton :UsuarioListForm:editButton :UsuarioListForm:deleteButton"/>
                       

                                    <p:column width="2%" filterBy="#{item.username}" filterStyle="height:20px;font-size:12px;">
                                        <f:facet name="header">
                                            <h:outputText value="Usuario"/>
                                        </f:facet>
                                        <h:outputText style="text-transform:capitalize" value="#{item.username}"/>
                                    </p:column>

                                    <p:column width="3%" filterBy="#{item.nombre}" filterStyle="height:20px;font-size:12px;">
                                        <f:facet name="header">
                                            <h:outputText value="Nombre"/>
                                        </f:facet>
                                        <h:outputText style="text-transform: capitalize" value="#{item.nombre}"/>
                                    </p:column>

                                    <p:column width="3%" filterBy="#{item.apellido}" filterStyle="height:20px;font-size:12px;">
                                        <f:facet name="header">
                                            <h:outputText value="Apellido"/>
                                        </f:facet>
                                        <h:outputText style="text-transform: capitalize" value="#{item.apellido}"/>
                                    </p:column>

                                    <p:column width="6%" filterBy="#{item.mail}" filterStyle="height:20px;font-size:12px;">
                                        <f:facet name="header">
                                            <h:outputText value="Mail"/>
                                        </f:facet>

                                        <h:outputText value="#{item.mail}"/>
                                    </p:column>

                                    <p:column width="8%"  sortBy="#{item.idRol.descripcion}">
                                        <f:facet name="header">
                                            <h:outputText value="Rol"/>
                                        </f:facet>

                                        <h:outputText style="text-transform: capitalize" value="#{item.idRol.descripcion}"/>
                                    </p:column>

                                 
                             
                                </p:dataTable>
                            </div>

                        </div>

                    </div>

                </h:form>
               <ui:include src="View.xhtml"/>
              <ui:include src="Edit.xhtml"/>
            </ui:define>

        </ui:composition>

    </body>
</html>
